<template>
  <div class="job">
    <div @click="detail(jobinfo.jobId)">

    <el-row type="flex" justify="space-between">
      <el-col style="text-align: left">{{jobinfo.name}}</el-col>
      <el-col style="text-align: right">
        <el-avatar :src="jobinfo.logo" size="medium"></el-avatar>
        {{jobinfo.companyName}}
      </el-col>
    </el-row>
    <el-row type="flex">
      <el-col style="display: inline-block">
        <p style="font-size: 16px;
    color: #ff5959;
    margin-right: 10px;
    float: left;">{{jobinfo.salary}}</p>
        <ul>
          <li>{{jobinfo.location}}</li>
          <li>{{jobinfo.experience}}</li>
          <li>{{jobinfo.degree}}</li>
        </ul>
      </el-col>
      <el-col>
        <p style="float: right;font-size: 12px">{{jobinfo.scale}}</p>
      </el-col>
    </el-row>
    </div>
    <el-row type="flex" justify="space-between">
      <el-col style="width:auto">
        <el-tag  size="mini" v-for="i in jobinfo.tags" :key="i.id">{{i.tag}}</el-tag>
      </el-col>
      <el-col :span="4">
        <el-button type="primary" @click="apply" size="small" :disabled="disable">申请职位</el-button>
        <el-button size="small" type="success" @click="chart(jobinfo.jobId)">立即沟通</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import {requests} from "@/utils/request";

export default {
  // eslint-disable-next-line vue/multi-word-component-names
  name: "job",
  props:{
    jobinfo:{
      type:Object
    }
  },
  methods:{
    apply(){
      this.$alert('是否发送简历',{
        confirmButtonText:'发送',
        callback:action => {
          if(action==="confirm"){
            requests.post("/user/delivery",{
              jobId:this.jobinfo.jobId
            }).then(res=>{
              this.$message({
                type:"success",
                message:res.data.data
              })
              this.jobinfo.visited=true
            })
          }
        }
      })
    },
    detail(id){
      console.log("detail",id)
      this.$router.push({
        path:'/index/jobdetails',
        query:{
          id:id
        }
      })
    },
    //跳转聊天
    chart(id){
      this.$router.push({
        path:'/index/chart',
        query:{
          id:id
        }
      })
    }
  },
  computed:{
    disable(){
      return Boolean(this.jobinfo.visited)
    }
  }
}
</script>

<style scoped>
.job{
  background-color: white;
  padding: 10px;
  margin-bottom: 4px;
}
ul{
  float: left;
  list-style: none;
  padding: 0 0 0 10px;
}
li{
  float: left;
  border-right: 1px solid #eee;
  font-size: 12px;
  color: #666;
  padding: 0 8px;
}
</style>